<template>
	<view class="container">
		<!-- <navbar bg-color="#E72A2A" title="商城" color="#ffffff">
      <view class="left-icon" slot="leftIcon" style="position: absolute">
        <view class="logo"> LOGO </view>
      </view>
    </navbar> -->
		<!-- <view class="header">
      <headerSearch class="search-box" bgColor="#ffffff" @searchClick="searchClick">
        <view class="left" slot="left" @click.stop="citySelect">
          <text>{{ city.name }}</text>
          <image :src="$img_path('/course/select.png')" mode="widthFix"></image>
        </view>
      </headerSearch>
      <view class="msg">
        <image :src="$img_path('/course/index/1.png')" mode="widthFix"></image>
      </view>
    </view> -->

		<view class="content">
			<!-- <view class="top">
        <view class="t-text"> 您需要什么服务? </view>
        <view class="service">
          <view class="item" @click="toModel('/pages/index/index', 1)">
            <image :src="$img_path('/course/index/2.png')" mode="widthFix"></image>
          </view>
          <view class="item item-M-style">
            <image :src="$img_path('/course/index/3.png')" mode="widthFix"></image>
          </view>
          <view class="item" @click="toModel('/pagesCourse/index/index', 2)">
            <image :src="$img_path('/course/index/4.png')" mode="widthFix"></image>
          </view>
        </view>
      </view> -->
			<!-- 8 - 导航 -->
			<view class="bg-box box-1" style="padding-bottom: 20rpx" v-if="nav_8.length > 0">
				<view class="bg-con-box">
					<view class="item" v-for="(item, i) in nav_8" :key="item.id" @click="toList(item)">
						<image :src="$img_base_url(item.thumb_image)" mode="widthFix"></image>
						<text style="margin-top: 6rpx">{{ item.name }}</text>
					</view>
				</view>
			</view>

			<!-- 10 - 导航 -->
			<view class="bg-box box-1" v-if="nav_10.length > 0">
				<view class="bg-con-box" style="width: calc(100% + 42rpx)">
					<view class="item" v-for="(item, i) in nav_10" :key="item.id" @click="toList(item)"
						style="width: 104rpx; margin-right: 38rpx; margin-bottom: 20rpx">
						<image style="width: 80rpx" :src="$img_base_url(item.thumb_image)" mode="widthFix"></image>
						<text style="font-size: 26rpx">{{ item.name }}</text>
					</view>
				</view>
			</view>

			<!-- <view class="Notice">
				<image :src="$img_path('/course/index/16.png')" mode="widthFix"></image>
				<view class="text"> 服务电话：{{phone}} </view>
			</view> -->

			<!-- 优惠券 -->
			<view class="bg-box box-3">
				<image class="bg-img" :src="$img_path('/course/index/bg2.png')" mode="widthFix"></image>
				<view class="title">
					<view class="left">
						<image :src="$img_path('/course/index/15.png')" mode="widthFix"></image>
						<text>优惠券</text>
					</view>
					<view class="right" @click="toUrl('/pagesMall/coupon_list/coupon_list')">
						<text>更多</text>
						<image :src="$img_path('/course/index/icon_r.png')" mode="widthFix"></image>
					</view>
				</view>

				<view class="coupon">
					<view class="c-box">
						<view class="item" v-for="(item, i) in CouponList" :key="item.id">
							<!-- <image :src="$img_path('/course/index/c.png')" mode="widthFix"></image> -->
							<view class="zk-box">
								<view class="title"> 优惠券 </view>
								<view class="val">
									<text>{{ item.type == "reduction" ? Number(item.price) : item.discount }}</text>{{ item.type == "reduction" ? "元" : "折" }}
								</view>
							</view>

							<view class="xz">
								<!-- {{item.type=='reduction'?`满${Number(item.limit)}元立减`:'最高减'}} -->
								{{ `满${Number(item.limit)}元立减` }}
							</view>
						</view>
					</view>
				</view>
				<view class="t-img" v-if="Ads && Ads[0] && Ads[0].ads[1]">
					<!-- 首页广告1 -->
					<view class="i">
						<!-- <image v-for="item,index in Ads[1].ads" :key="index" :src="$img_base_url(item.thumb_image)"
							mode="aspectFill"></image> -->
						<!-- v-if="Ads && Ads[0].ads[0]" <swiper style="width: 100%;height: 100%;" :autoplay="true" :interval="3000" :duration="1000">
							<swiper-item style="width: 100%;height: 100%;" v-for="(item,i) in Ads[1].ads" :key="item.id">
								<view class="swiper-item" style="width: 100%;height: 100%;">
									<image style="width: 100%;height: 100%;" :src="$img_base_url(item.thumb_image)" mode="aspectFill"></image>
								</view>
							</swiper-item>
						</swiper>
						 -->
						<image style="width: 100%; height: 100%"
							:src="$img_base_url(Ads ? Ads[0].ads[0].thumb_image : '')"
							@click="toList(Ads ? Ads[0].ads[0] : '')" mode="aspectFill"></image>
					</view>
					<!-- 首页广告2 -->
					<view class="i" >
						<!-- <swiper style="width: 100%;height: 100%;" :autoplay="true" :interval="3000" :duration="1000">
							<swiper-item style="width: 100%;height: 100%;" v-for="(item,i) in Ads[2].ads" :key="item.id">
								<view class="swiper-item" style="width: 100%;height: 100%;">
									<image style="width: 100%;height: 100%;" :src="$img_base_url(item.thumb_image)" mode="aspectFill"></image>
								</view>
							</swiper-item>
						</swiper> -->
						<image style="width: 100%; height: 100%" :src="$img_base_url(Ads[0].ads[1].thumb_image)"
							@click="toList(Ads[0].ads[1])" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<!-- 拼团 -->
			<view class="groupBuy box-3">
				<view class="title">
					<view class="left">
						<text>特惠拼团</text>
					</view>
					<view class="right" @click="toUrl('/pagesMall/group_buying/group_buying')">
						<text>查看全部</text>
						<image :src="$img_path('/course/index/icon_r.png')" mode="widthFix"></image>
					</view>
				</view>
				<view class="scroll-box">
					<scroll-view class="list-scroll" scroll-x="true">
						<view class="item" v-for="(item, i) in groups" :key="item.id" @click="toGroups(item, i)">
							<view class="img-box">
								<image :src="$img_base_url(item.image)" mode="aspectFill"></image>
								<view class="text">
									<image :src="$img_path('/mall/1.png')" mode="scaleToFill"></image>
									<text>{{ item.people_num }}人团</text>
								</view>
							</view>
							<view class="price"> <text>￥</text>{{ item.price }} </view>
							<view class="num"> 已拼{{ item.groups_num }}件 </view>
						</view>
					</scroll-view>
				</view>
			</view>

			<!-- <view class="swiper_1 swiper-box" v-if="Ads && Ads[1].ads.length > 0">
				<swiper :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item>
						<view class="swiper-item" v-for="(item, i) in Ads[1].ads" :key="item.id">
							<image :src="$img_base_url(item.thumb_image)" @click="toList(item)" mode="aspectFill">
							</image>
						</view>
					</swiper-item>
				</swiper>
			</view> -->

			<view class="bg-box box-3 img-nav" v-if="Ads && Ads[2] && Ads[2].ads.length > 0">
				<view class="title">
					<view class="left">
						<text>{{ Ads ? Ads[2].name : "" }}</text>
					</view>
					<view class="right">
						<text></text>
					</view>
				</view>
				<view class="img-box">
					<view class="s-img">
						<swiper style="width: 100%; height: 100%" :autoplay="true" :interval="3000" :duration="1000">
							<swiper-item style="width: 100%; height: 100%"
								v-for="(item, i) in Ads[2].ads.slice(0, Ads[2].ads.length - 2)" :key="item.id">
								<view class="swiper-item" style="width: 100%; height: 100%">
									<image style="width: 100%; height: 100%" :src="$img_base_url(item.thumb_image)"
										@click="toList(item)" mode="aspectFill"></image>
								</view>
							</swiper-item>
						</swiper>
					</view>
					<view class="c-img">
						<image :src="$img_base_url(Ads ? Ads[2].ads[Ads[2].ads.length - 2].thumb_image : '')"
							@click="toList(Ads[2].ads[Ads[2].ads.length - 2])" mode="aspectFill"></image>
						<image :src="$img_base_url(Ads ? Ads[2].ads[Ads[2].ads.length - 1].thumb_image : '')"
							@click="toList(Ads[2].ads[Ads[2].ads.length - 1])" mode="aspectFill"></image>
					</view>
				</view>
			</view>

			<!-- 模块1 -->
			<view class="list-box row-list bg-box" v-if="moduleInfo && moduleInfo[0]">
				<view class="title">
					{{ moduleInfo && moduleInfo[0] ? moduleInfo[0].name : "" }}
				</view>
				<view class="item" v-for="(item, i) in moduleInfo ? moduleInfo[0].goods.slice(0, 3) : []"
					:key="item.id">
					<goodsBox :goodsDetail="item" :styleType="2" :title_row="1"
						:imageStyle="{ width: '260rpx', height: '260rpx' }"
						:pageUrl="'/pagesMall/goods/detail?id=' + item.id">
						<text slot="center" style="margin-top: 16rpx; display: block">销量：{{ item.sales }}</text>
						<view slot="tagList" class="tagList" v-if="item.labels">
							<view class="tag-item" v-for="(t_i, idx) in item.labels.split(',')" :key="idx">
								{{ t_i }}
							</view>
						</view>
					</goodsBox>
				</view>
			</view>

			<!-- 模块2 -->
			<view class="list-box colunm-list bg-box" style="background-color: transparent"
				v-if="moduleInfo && moduleInfo[1]">
				<view class="title">
					{{ moduleInfo && moduleInfo[1] ? moduleInfo[1].name : "" }}
				</view>
				<view class="list">
					<view class="item" :goodsDetail="item"
						v-for="(item, i) in moduleInfo ? moduleInfo[1].goods.slice(0, 6) : []" :key="item.id">
						<goodsBox :goodsDetail="item" :styleType="1" :title_row="1"
							:imageStyle="{ width: '344rpx', height: '344rpx' }"
							:pageUrl="'/pagesMall/goods/detail?id=' + item.id">
							<view slot="tagList" class="tagList" v-if="item.labels">
								<view class="tag-item" v-for="(t_i, idx) in item.labels.split(',')" :key="idx">
									{{ t_i }}
								</view>
							</view>
							<view slot="tagList" class="tagList" v-if="!item.labels">
								<view class="tag-item" style="background: transparent; border: none"
									v-for="(t_i, idx) in item.labels.split(',')" :key="idx">
									{{ t_i }}
								</view>
							</view>
							<text slot="center" style="margin-top: 16rpx; display: block">销量：{{ item.sales }}</text>
						</goodsBox>
					</view>
				</view>
			</view>

			<!-- 模块3 -->
			<view class="list-box colunm-list bg-box" style="background-color: transparent"
				v-if="moduleInfo && moduleInfo[2]">
				<view class="title">
					<!-- {{moduleInfo[2].name}} -->
					为你推荐
				</view>
				<view class="list">
					<view class="item" v-for="(item, i) in moduleInfo ? moduleInfo[2].goods.slice(0, 8) : []"
						:key="item.id">
						<goodsBox :goodsDetail="item" :styleType="1" :title_row="1"
							:imageStyle="{ width: '344rpx', height: '344rpx' }"
							:pageUrl="'/pagesMall/goods/detail?id=' + item.id">
							<text slot="center" style="margin-top: 16rpx; display: block">销量：{{ item.sales }}</text>
							<view slot="tagList" class="tagList" v-if="item.labels">
								<view class="tag-item" v-for="(t_i, idx) in item.labels.split(',')" :key="idx">
									{{ t_i }}
								</view>
							</view>
						</goodsBox>
					</view>
				</view>
			</view>

			<!-- 猜你喜欢 -->
			<view class="list-box colunm-list bg-box" style="background-color: transparent">
				<!-- <view class="title m-title"> 精选好物 </view> -->
				<view class="list">
					<view class="item" :goodsDetail="item" v-for="(item, i) in likeList" :key="i">
						<goodsBox :goodsDetail="item" :styleType="1" :title_row="1"
							:imageStyle="{ width: '344rpx', height: '344rpx' }"
							:pageUrl="'/pagesMall/goods/detail?id=' + item.id">
							<view slot="tagList" class="tagList" v-if="item.labels">
								<view class="tag-item" v-for="(t_i, idx) in item.labels.split(',')" :key="idx">
									{{ t_i }}
								</view>
							</view>
							<view slot="tagList" class="tagList" v-if="!item.labels">
								<view class="tag-item" style="background: transparent; border: none"
									v-for="(t_i, idx) in item.labels.split(',')" :key="idx">
									{{ t_i }}
								</view>
							</view>
							<text slot="center" style="margin-top: 16rpx; display: block">销量：{{ item.sales }}</text>
						</goodsBox>
					</view>
				</view>
			</view>

			<!-- <view class="bottom-img">
        <image :src="$img_path('/course/index/bg.png')" mode="aspectFill"></image>
      </view> -->
			<view class="bottom-img">
				<!-- <image :src="$img_path('/course/index/bg.png')" mode="widthFix"></image> -->
				<image :src="$img_path('/course/index/bg.png')" mode="widthFix"></image>
			</view>
		</view>

		<view class="scroll-top" v-if="s_top" @click="toTop">
			<image :src="$img_path('/course/top.png')" mode="widthFix"></image>
		</view>
		<Tarbar index="1" page="3"></Tarbar>
		<!-- <view class="box-fixed" @click="toService">
      <uni-icons color="#ffffff" type="contact" size="30"></uni-icons>
      <text>客服</text>
    </view> -->
	</view>
</template>

<script>
	import {
		getSysConfig
	} from "@/utils/api/userApi.js";
	import {
		getNav,
		getAds,
		indexModule
	} from "@/utils/api/public.js";
	import {
		listsNew,
		getCouponList
	} from "@/utils/api/mallApi.js";
	import goodsBox from "@/components/service-box/mall-item-box.vue";
	import headerSearch from "@/components/header-search/header-search.vue";
	export default {
		name: "mallIndex",
		components: {
			headerSearch,
			goodsBox,
		},
		props: {
			// 上拉刷新
			scrollTop: {
				type: Number,
				default: 0,
			},
			// 下拉加载
			scrollHeight: {
				type: Number,
				default: 0,
			},
		},
		watch: {
			scrollTop(val) {
				this.is_tj = 1;
				this.likeList = [];
				this.getNavApi();
				this.getindexModule();
				this.getindexGroups();
				this.getAdsApi();
				this.getindexLike();
			},
			scrollHeight() {
				if (this.likeList.length < 10 || this.likeList.length < this.is_tj * 10) {
					uni.showToast({
						title: "没有更多了",
						icon: "none",
					})
					return;
				}
				this.is_tj++;
				this.getindexLike();
				console.log(val, 999);
			},
		},
		data() {
			return {
				city: {},
				s_top: false,
				img_base_url: this.img_base_url,
				nav_8: [],
				nav_10: [],
				moduleInfo: null,
				Ads: null,

				groups: [],
				CouponList: [],
				is_tj: 1, //猜你喜欢页数
				// 猜你喜欢列表
				likeList: [],
				phone: "",
			};
		},
		onLoad() {
			console.log("-------------2");
		},
		mounted() {
			console.log("-------------1");
			this.getNavApi();
			this.getindexModule();
			this.getindexGroups();
			this.getAdsApi();
			this.getCoupon();
			this.getindexLike();
			this.getSysConfig();
		},
		onShow() {
			this.city = JSON.parse(uni.getStorageSync("select_city"));
		},
		methods: {
			async getSysConfig() {
				let data = await getSysConfig({
					site: "sys_kefu",
				});
				this.phone = data.data;
			},
			// 优惠券列表
			async getCoupon() {
				let res = await getCouponList();
				this.CouponList = res.data.data.splice(0, 4);
			},

			// 获取导航
			async getNavApi() {
				let nav_8 = await getNav({
					group: 1,
					type: 2
				});
				this.nav_8 = nav_8.data;
				let nav_10 = await getNav({
					group: 2,
					type: 2
				});
				this.nav_10 = nav_10.data;
			},

			// 获取广告
			async getAdsApi() {
				let adList = await getAds({
					type: 2
				});
				this.Ads = adList.data;
				console.log(this.Ads, "getAdsgetAdsgetAds");
			},

			// 获取首页模块配置
			async getindexModule() {
				let module = await indexModule({
					type: 2
				});
				// console.log(module,'-')
				this.moduleInfo = module.data;
				uni.hideLoading();
			},

			// 拼团
			getindexGroups() {
				listsNew({
					type: "groups"
				}).then((res) => {
					this.groups = res.data.data;
				});
			},
			// 猜你喜欢
			getindexLike() {
				listsNew({
					page: this.is_tj,
					is_tj: 1
				}).then((res) => {
					let data = res.data.data.slice();
					data.sort(() => 0.5 - Math.random());
					this.likeList.push(...data);
				});
			},

			toModel(url, i) {
				uni.setStorageSync("tarbarModule", i);
				uni.reLaunch({
					url: url,
				});
			},
			toUrl(url) {
				uni.navigateTo({
					url: url,
				});
			},

			toList(item) {
				console.log(item);
				// uni.navigateTo({
				//   url: `/pagesMall/search/list?content=${item.name}&type=2&classify=${item.id}`,
				// });
				// return;
				if (item.url_type == 1) {
					uni.navigateTo({
						url: `/pagesMall/webView/webView?url=${item.url}`,
					});
				} else {
					uni.navigateTo({
						url: item.url,
					});
				}
			},
			toTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100,
				});
			},

			// 拼团详情
			toGroups(data, i) {
				uni.navigateTo({
					url: `/pagesMall/group_buying/detail?id=${data.id}`,
				});
			},

			searchClick() {
				uni.navigateTo({
					url: "/pagesMall/search/search",
				});
			},
			citySelect() {
				uni.navigateTo({
					url: "/pagesMine/city_select/city_select",
				});
			},
			toService() {
				uni.navigateTo({
					url: "/pagesMine/helpAndCustomerService/helpAndCustomerService",
				});
			},
		},
		onPageScroll(event) {
			if (event.scrollTop > 100) {
				this.s_top = true;
			} else {
				this.s_top = false;
			}
		},
	};
</script>

<style lang="scss" scoped>
	// @import "index.scss";

	.box-fixed {
		position: fixed;
		right: 10rpx;
		bottom: 200rpx;
		border: 1px solid red;
		align-items: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		width: 120rpx;
		height: 120rpx;
		background: #e72a2a;
		color: #fff;
	}

	.container {
		.left-icon {
			left: 22rpx;
			width: 142rpx;
			height: 68rpx;
			background: #f8f8f8;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.header {
			display: flex;
			align-items: center;
			padding: 20rpx 22rpx 24rpx;
			background-color: #e72a2a;

			.search-box {
				background-color: #ffffff;
				height: 72rpx;
				border-radius: 37rpx;
				padding: 0 28rpx;
				box-sizing: border-box;
			}

			.left {
				display: flex;
				align-items: center;

				text {
					font-weight: 400;
					font-size: 26rpx;
					color: #333333;
					line-height: 36rpx;
				}

				image {
					width: 16rpx;
					height: 16rpx;
					margin-left: 8rpx;
				}

				border-right: 1rpx solid #cccccc;
				padding-right: 24rpx;
				box-sizing: border-box;
			}

			.msg {
				padding-left: 24rpx;
				height: 40rpx;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.content {
			// padding: 0 22rpx;
			box-sizing: border-box;

			.top {
				padding-top: 20rpx;

				.t-text {
					font-weight: 800;
					font-size: 40rpx;
					color: #333333;
					line-height: 56rpx;
					text-align: center;
				}

				.service {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 28rpx;

					.item {
						flex: 1;

						image {
							width: 100%;
							height: 220rpx;
						}
					}

					.item+.item {
						margin-left: 20rpx;
					}

					.item-M-style {
						// width: calc(43.3% - 13.4rpx);
						flex: 1.2;
					}
				}
			}

			.bg-box {
				background-color: #ffffff;
				border-radius: 20rpx;
			}

			.box-1 {
				padding: 20rpx 0;
				box-sizing: border-box;
				margin-top: 20rpx;
				overflow: hidden;

				.bg-con-box {
					// display: flex;
					// flex-wrap: wrap;
					// justify-content: space-between;
					//width: calc(100% + 62rpx);
					display: grid;
					grid-template-columns: repeat(4, 1fr);
					gap: 20rpx;

					.item {
						display: flex;
						flex-direction: column;
						align-items: center;

						// width: 130rpx;
						// margin: 0 auto;
						// margin-right: 54rpx;
						image {
							width: 96rpx;
							height: 96rpx;
						}

						text {
							font-weight: bold;
							font-size: 30rpx;
							color: #333333;
							// line-height: 42rpx;
							// margin-top: -10rpx;
						}
					}
				}
			}

			.Notice {
				background-color: #ffffff;
				height: 64rpx;
				border-radius: 32rpx;
				display: flex;
				align-items: center;
				padding: 18rpx 28rpx;
				box-sizing: border-box;
				margin-top: 20rpx;

				image {
					width: 32rpx;
					height: 27rpx;
				}

				.text {
					font-weight: 400;
					font-size: 26rpx;
					color: #333333;
					line-height: 36rpx;
					margin-left: 16rpx;
				}
			}

			.swiper_1 {
				width: 100%;
				height: 272rpx;
				margin-top: 20rpx;

				swiper {
					width: 100%;
					height: 100%;

					swiper-item {
						width: 100%;
						height: 100%;
					}

					.swiper-item {
						width: 100%;
						border-radius: 20rpx;
						overflow: hidden;

						image {
							width: 100%;
							height: 272rpx;
						}
					}
				}
			}

			.box-3 {
				width: 100%;
				position: relative;
				padding: 22rpx 20rpx;
				box-sizing: border-box;
				margin-top: 20rpx;
				background: #ffffff;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.04);
				overflow: hidden;

				.bg-img {
					width: calc(100% + 40rpx);
					position: absolute;
					top: -14rpx;
					left: -20rpx;
					z-index: 0;
				}

				.title {
					display: flex;
					align-items: center;
					position: relative;
					z-index: 1;
					justify-content: space-between;

					.left {
						display: flex;
						justify-content: flex-start;
						align-items: center;

						image {
							width: 48rpx;
							height: 48rpx;
						}

						text {
							display: block;
							font-weight: bold;
							font-size: 36rpx;
							color: #333333;
							line-height: 50rpx;
							margin-left: 2rpx;
						}
					}

					.right {
						display: flex;
						justify-content: flex-end;
						align-items: center;

						image {
							width: 24rpx;
							height: 24rpx;
							margin-top: 4rpx;
						}

						text {
							display: block;
							font-weight: 400;
							font-size: 30rpx;
							color: #333333;
							line-height: 42rpx;
						}
					}
				}

				.coupon {
					width: 100%;
					overflow: hidden;
					margin-top: 18rpx;
					position: relative;
					z-index: 1;

					.c-box {
						width: 100%;
						display: flex;
						align-items: center;

						.item {
							width: 154rpx;
							background: #ffffff;
							box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(255, 217, 220, 0.38);
							border-radius: 18rpx 18rpx 18rpx 18rpx;
							overflow: hidden;

							// border: 2rpx solid rgba(252,241,235,0.23);
							&:not(:last-child) {
								margin-right: 18rpx;
							}

							.zk-box {
								width: 100%;
								height: 120rpx;

								.title {
									display: block;
									width: 108rpx;
									height: 34rpx;
									background: #ffebe4;
									border-radius: 0rpx 0rpx 22rpx 22rpx;
									margin: 0 auto;
									font-weight: 400;
									font-size: 20rpx;
									color: #fb5a5a;
									line-height: 34rpx;
									text-align: center;
								}

								.val {
									font-weight: 400;
									font-size: 20rpx;
									color: #fb5a5a;
									line-height: 44rpx;
									text-align: center;

									text {
										font-size: 32rpx;
										font-weight: 500;
									}

									margin: 16rpx auto 0;
								}
							}

							.xz {
								width: 100%;
								height: 44rpx;
								font-weight: 400;
								font-size: 20rpx;
								color: #999999;
								line-height: 44rpx;
								text-align: center;
								position: relative;
								border-top: 1rpx dashed #ffdbdb;

								&::before {
									content: "";
									position: absolute;
									width: 17rpx;
									height: 17rpx;
									background: rgba(252, 241, 235, 0.8);
									// box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(255,217,220,0.38);
									border: 2rpx solid rgba(252, 241, 235, 0.23);
									border-radius: 50%;
									top: 0;
									left: 0;
									transform: translateX(-40%) translateY(-50%);
								}

								&::after {
									content: "";
									position: absolute;
									width: 17rpx;
									height: 17rpx;
									background: rgba(252, 241, 235, 0.8);
									// box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(255,217,220,0.38);
									border: 2rpx solid rgba(252, 241, 235, 0.23);
									border-radius: 50%;
									top: 0;
									right: 0;
									transform: translateX(40%) translateY(-50%);
								}
							}

							// image{
							// 	width: 100%;
							// 	height: 100%;
							// }
						}
					}
				}

				.t-img {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 20rpx;
					position: relative;
					z-index: 1;

					.i {
						width: calc(50% - 10rpx);
						height: 204rpx;
						border-radius: 20rpx;
						box-sizing: border-box;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}

			.groupBuy {
				.scroll-box {
					width: 100%;

					.list-scroll {
						// height: 292rpx;
						white-space: nowrap;
					}

					.item {
						display: inline-block;
						width: 252rpx;
						padding: 20rpx 0 0;
						box-sizing: border-box;

						&:not(:first-child) {
							margin-left: 20rpx;
						}

						.img-box {
							position: relative;

							&>image {
								width: 252rpx;
								height: 168rpx;
								border-radius: 8rpx;
							}

							&>.text {
								position: absolute;
								left: 0;
								top: 0;
								width: 88rpx;
								height: 44rpx;

								image {
									width: 100%;
									height: 100%;
									position: absolute;
									left: 0;
									top: 0;
									z-index: 1;
								}

								text {
									font-weight: bold;
									font-size: 24rpx;
									color: #693600;
									line-height: 44rpx;
									display: block;
									text-align: center;
									position: relative;
									z-index: 2;
								}
							}
						}

						.price {
							font-weight: 900;
							font-size: 40rpx;
							color: #e72a2a;
							line-height: 54rpx;
							margin-top: 8rpx;
							text-align: center;
						}

						.num {
							font-weight: bold;
							font-size: 26rpx;
							color: #333333;
							line-height: 36rpx;
							margin-top: 8rpx;
							text-align: center;
						}
					}
				}
			}

			.img-nav {
				.img-box {
					display: flex;
					justify-content: space-between;
					padding-top: 20rpx;

					&>.s-img {
						width: calc(50% - 5rpx);
						height: 436rpx;
						border-radius: 20rpx;
					}

					.c-img {
						width: calc(50% - 5rpx);
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						image {
							width: 100%;
							height: 212rpx;
							border-radius: 20rpx;
						}
					}
				}
			}

			.list-box {
				margin-top: 20rpx;

				&.row-list {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					padding: 20rpx;
					box-sizing: border-box;

					.item {
						margin-bottom: 20rpx;

						&:last-child {
							margin-bottom: 0;
						}
					}

					.title {
						width: 100%;
						font-weight: bold;
						font-size: 36rpx;
						color: #333333;
						line-height: 50rpx;
						padding-bottom: 20rpx;
					}

					.tagList {
						display: flex;
						align-items: center;
						margin-top: 16rpx;

						.tag-item {
							// width: 118rpx;
							height: 34rpx;
							border-radius: 6rpx 6rpx 6rpx 6rpx;
							border: 2rpx solid #0291ff;
							padding: 3rpx 12rpx;
							box-sizing: border-box;
							font-weight: 400;
							font-size: 20rpx;
							color: #0291ff;
							// line-height: 34rpx;
							text-align: center;
							margin-left: 12rpx;

							&:first-child {
								background: #ff6602;
								border-color: #ff6602;
								color: #ffffff;
								margin-left: 0;
							}
						}
					}

					.item {
						width: 100%;
					}
				}
			}

			.colunm-list {
				.title {
					width: 100%;
					font-weight: bold;
					font-size: 36rpx;
					color: #333333;
					line-height: 50rpx;
					padding-bottom: 20rpx;
					padding-top: 20rpx;
				}

				.list {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;

					.item {
						width: 344rpx;
						margin-bottom: 20rpx;
					}

					.tagList {
						display: flex;
						align-items: center;
						margin-top: 16rpx;
						margin-bottom: 4rpx;

						.tag-item {
							// width: 118rpx;
							height: 34rpx;
							border-radius: 6rpx 6rpx 6rpx 6rpx;
							border: 2rpx solid #0291ff;
							font-weight: 400;
							font-size: 20rpx;
							color: #0291ff;
							// line-height: 34rpx;
							text-align: center;
							margin-left: 12rpx;
							padding: 3rpx 12rpx;
							box-sizing: border-box;

							&:first-child {
								background: #ff6602;
								border-color: #ff6602;
								color: #ffffff;
								margin-left: 0;
							}
						}
					}
				}
			}

			// .bottom-img {
			//   width: 622rpx;
			//   height: 126rpx;
			//   margin: 60rpx auto 20rpx;
			//   & > image {
			//     width: 100%;
			//     height: 100%;
			//   }
			// }
			.bottom-img {
				margin-top: 40rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				image {
					width: 300rpx;
					margin-top: 40rpx;
				}
			}
		}
	}

	.scroll-top {
		position: fixed;
		bottom: 400rpx;
		right: 22rpx;
		z-index: 9;

		image {
			width: 80rpx;
			height: 80rpx;
		}
	}

	.m-title {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.m-title::before {
		content: "";
		width: 100rpx;
		height: 1rpx;
		background: #333;
		margin-right: 20rpx;
	}

	.m-title::after {
		content: "";
		width: 100rpx;
		height: 1rpx;
		background: #333;
		margin-left: 20rpx;
	}
</style>